<template>
	<view class="commRoot" :style="'background:'+bg+';'">
		<view class="status_bar_h" :style="'height:'+statusBarHeight+'px'">

		</view>
		<view class="w-100" v-if="isSlot">
			<slot name="navBar"></slot>
		</view>
		<view v-else-if="showNavBar" class="w-100  fz-36  px-3  con-between " :style="'height: 44px;'">
			<view class="w-100 con-between">
				<view  @click="pageBreak()" class="w-25  text-left" v-if="leftType=='break'">
					<u-icon  name="arrow-left" size="30rpx"></u-icon>
				</view>
				<view @click="$jumpPage(homePath.path,homePath.jumpType)" class="w-25  text-left" v-if="leftType=='home'">
					<u-icon   name="home"
						size="30rpx"></u-icon>
				</view>

			<!-- 	<view class="w-25" v-else @click="onTopNavClick('left',leftBox)">
				</view> -->
				<view class="w-50 d-flex fz-32 fw-700 con-center2" @click="onTopNavClick('title')">
					{{title}}
				</view>
				<view class="w-25  d-flex align-items-center justify-content-end"
					@click="onTopNavClick('right',rightBox)">
					<slot name="rightBox"></slot>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "topNavBar",
		props: {
			leftType: {
				type: String,
				default: 'break',
			},
			showHome: {
				type: Boolean,
				default: true,
			},
			homePath: {
				type: Object,
				default: function() {
					return {
						path: "/pages/index/index",
						jumpType: "switchTab"
					}
				},
			},
			showNavBar: {
				type: Boolean,
				default: true,
			},
			isSlot: {
				type: Boolean,
				default: false,
			},
			bg: {
				type: [Object, String],
				default: "linear-gradient(90deg, #0fd6fe, #0eabff)",
			},
			title: {
				type: [Number, String],
				default: "",
			},
			leftBox: {
				type: String,
				default: ""
			},
			rightBox: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				titleBarHeight: "",
				statusBarHeight: 0,
			};
		},
		mounted() {
			//  #ifndef  H5
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			uni.getSystemInfo({ //获取系统信息
				success: res => {
					let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
						2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
					this.titleBarHeight = navHeight;
					this.statusBarHeight = res.statusBarHeight
				},
				fail(err) {
					console.log(err);
				}
			})
			// #endif
		},
		methods: {
			onTopNavClick(boxName, boxVal) {
				let obj = {
					boxName,
					boxVal
				}
				this.$emit("topNavClick", {
					...obj
				})
			}
		}

	}
</script>

<style>
	.commRoot {
		position: sticky;
		top: 0rpx;
		color: #FFFFFF;
		z-index: 1996;
	}
</style>
